import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import './iconfont/iconfont.css';
let pureArr = [
  '组海报带你看活力中国'
  ,
  '组海报带你看活力中国'
  ,
  '  组海报带你看活力中国'
  ,
  ' 组海报带你看活力中国'
  ,
  '组海报带你看活力中国'
  ,
  '组海报带你看活力中国'
]

let task = (
  <>
    <div className="boxAll">
      <div className="baidu">
        {/* 百度logo */}
        <div className="baiduLogo">
          <img
            src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
            alt="百度"
          />
        </div>
        {/* 搜索框 */}
        <div className="search">
          <input type="text" />
          {/* icon */}
          {/* <i className="iconfont icon-zhaoxiangji"> </i> */}
          {/* 百度一下 */}
          <div> 百度一下 </div>
        </div>
        {/* 百度热搜-换一换 */}
        <div className="topSearch">
          <div className="topSearch-left">
            百度热搜{' '}
          </div>

          <div className="topSearch-right"> 换一换</div>
        </div>
        {/* 内容 */}
        <main>
          <div className="list">
            <ul>
              {pureArr.map((item, index) => {
                return (<li key={index}> <i>{index+1}</i> {item}</li>)
              })}
            </ul>
          </div>
        </main>
      </div>
      <div className='todoList'>
     <div className='top'>
        <h1 style={{color:'#009933',padding:'20px 0 6px 20px'}}>拾忆记事本</h1>
        <p style={{color:'#339900',padding:'0 0 8px 20px'}}>记录生活的点点滴滴,写下生活的每一个美好</p >
        {/* 搜索框 */}
        <div className='search2'>
          <button className='height '>内容</button>
          <input className='ipt'  placeholder='输入你要记事的内容'/>
          <button className='height '>确认</button>
        </div>
     </div>
     {/* 内容 */}
     <div className='list'>
          <div style={{display:'flex'}}>
             <p className='num'>1</p > 
             <span className=''>|</span>
             <p className='record'>第一条记事本</p >
          </div>
          <span style={{marginRight:'40px',fontWeight:'800',color:'skyblue'}}>x</span>
     </div>
     {/* 总数 */}
     <div style={{display:'flex',justifyContent:'space-between',marginTop:'16px',padding:'0 1px'}}>
        <h3>总数:<span>3</span></h3>
        <p>清除</p >
     </div>
   </div>
    </div>
  </>
);



let toot = ReactDOM.createRoot(document.getElementById('root'));


toot.render(task);
